<template>
  <view class="card-content">
    <view class="card-header">
      <!-- 头像 -->
      <u-avatar
        src="https://sf6-cdn-tos.toutiaostatic.com/img/mosaic-legacy/2e0e20003729191fac9e8~c5_300x300.image"
        show-sex
        sex-icon="woman"
        show-level
        >
      </u-avatar>
      <!-- 昵称和时间 -->
      <view class="card-right">
        <view class="right-top-name">西瓜妹严尚嘉</view>
        <view class="header-right-bottom">
          两小时前
          <text class="header-right-info">
            <text class="header-right-point">·</text>
            泰洋川禾签约演员 头号英雄主持人
          </text>
        </view>
      </view>
    </view>
    <!-- 内容 -->
    <view class="card-body">
      <view class="card-body-text">
        东棉花胡同39号
      </view>
      <!-- 图片 -->
      <view class="card-body-img-col3" v-if="imgList.length > 1">
        <view class="card-body-img-col3-item" v-for="item in splitImgArr(imgList)" :key="item">
          <view v-for="item2 in item" :key="item2">
            <u-image @click="showPic(item2)" width="100%" height="250upx" :src="item2"></u-image>
          </view>
        </view>
      </view>
      <view class="card-body-img-col1" v-else>
        <u-image @click="showPic(imgList[0])" width="100%" height="750upx" :src="imgList[0]"></u-image>
      </view>
    </view>
    <!-- address -->
    <view class="address">
      <u-icon name="map-fill" class="map-icon" color="#2979ff"></u-icon>
      <u-link color="#2979ff">{{address}}</u-link>
    </view>
    <!-- 点赞 评论 转发 -->
    <view class="card-foot">
      <view class="card-foot-item">
        <u-image :src="zhuanfa" width="60upx" height="60upx"/>
        <text class="card-foot-item-text">转发</text>
      </view>
      <view class="card-foot-item" @tap="showDetail">
        <u-image :src="pinglun" width="60upx" height="60upx"/>
        <text class="card-foot-item-text">6</text>
      </view>
      <view class="card-foot-item">
        <u-image :src="dianzan" width="60upx" height="60upx"/>
        <text class="card-foot-item-text">13</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" scoped>
import { Component, Vue, Watch} from 'vue-property-decorator'
@Component({
  name: 'ListCard'
}) // 装饰器
export default class ListCard extends Vue {
  private imgList: Array<string> = [
    'http://p26.toutiaoimg.com/img/tos-cn-i-0022/9b823768adde469996b6efad367b9394~tplv-tt-post:342:224.jpeg?from=post',
    'http://p26.toutiaoimg.com/img/tos-cn-i-0022/030af1dda4404e96889bf2bd7ee44cb0~tplv-tt-post:342:224.jpeg?from=post',
    'http://p26.toutiaoimg.com/img/tos-cn-i-0022/ee96e46ab1c44ed0a7e0f51430b3dca3~tplv-tt-post:342:224.jpeg?from=post',
    'http://p26.toutiaoimg.com/img/tos-cn-i-0022/ee96e46ab1c44ed0a7e0f51430b3dca3~tplv-tt-post:342:224.jpeg?from=post',
    'http://p26.toutiaoimg.com/img/tos-cn-i-0022/23977c52f89742a69636fae4ff64f338~tplv-tt-post:342:224.jpeg?from=post',
    'http://p26.toutiaoimg.com/img/tos-cn-i-0022/04085075c1f64f119f7a036716f413e6~tplv-tt-post:342:224.jpeg?from=post',
    'http://p26.toutiaoimg.com/img/tos-cn-i-0022/5f27fd0e6bcf479aa3a4ef8e819817fb~tplv-tt-post:342:224.jpeg?from=post',
    'http://p26.toutiaoimg.com/img/tos-cn-i-0022/148144db611e44a2ba533a95a6001c54~tplv-tt-post:342:224.jpeg?from=post',
    'http://p26.toutiaoimg.com/img/tos-cn-i-0022/8490dec2d2ff4554a112934de2567f0f~tplv-tt-post:342:224.jpeg?from=post'
  ]

  /* 地址 */
  private address: string = '北京市·西小口·东升科技园'

  /* 切割图片数组 */
  private splitImgArr (data: Array<string>) {
    let result = []
    for(let i = 0; i < data.length; i += 3){
      result.push(data.slice(i, i + 3))
    }
    return result
  }
  /* 查看评论 */
  private showDetail () {
    uni.navigateTo({
      url: '/pages/community/components/cardDetail'
    })
  }
  // 预览图片
  private showPic(imgSrc: string) {
    uni.previewImage({
      indicator: 'none',
      current: imgSrc,
      urls: this.imgList,
    })
  }
  /* base64 */
  private zhuanfa: string = ''
  private pinglun: string = ''
  private dianzan: string = ''
}
</script>

<style lang="scss" scoped>
  .card-content {
    width: 750upx;
    display: flex;
    flex-direction: column;
    .card-header {
      padding: 20upx;
      display: flex;
      flex-direction: row;
      .card-right {
        padding-left: 10upx;
      }
    }
    .right-top-name {
      color: #222;
      font-family: PingFangSC-Medium;
      font-size: 30upx;
    }
    .header-right-bottom {
      margin-top: 4upx;
      font-size: 20upx;
      line-height: 10upx;
      color: #999;
      .header-right-info {
        .header-right-point {
          display: inline-block;
          padding: 10upx;
          font-weight: 700;
        }
      }
    }
    .card-body {
      .card-body-text {
        font-size: 30upx;
        line-height: 40upx;
        padding: 0 20upx;
        margin-bottom: 20upx;
      }
      .card-body-img-col1 {
         width: 750upx;
      }
      .card-body-img-col3 {
        width: 750upx;
        .card-body-img-col3-item {
          width: 750upx;
          display: flex;
          flex-direction: row;
          >view {
            width: 250upx;
            margin: 2upx;
          }
        }
      }
    }
    .card-foot {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      padding: 20upx 0;
      .card-foot-item {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text {
          color: #222;
          font-size: 34upx;
        }
      }
    }
    .address {
      margin-left: 40upx;
      margin-top: 20upx;
      .map-icon {
        margin-right: 10upx;
      }
    }
  }
</style>
